<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script type="text/javascript">
    /**
     * 生成随机数
     * @param m {number}
     * @param n {number}
     */
    function rand(m, n) {
        return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
    }

    $("#btn").click(function () {
        // 传统方法
        // setTimeout(() => {
        //     // 获取1-100的随机数
        //     let n = rand(1, 100);
        //     // n<=30
        //     if (n <= 30) {
        //         console.log("恭喜中奖！");
        //     } else {
        //         console.log("再接再厉！")
        //     }
        // }, 1000);

        // 用Promise实现
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                // 获取1-100的随机数
                let n = rand(1, 100);
                // n<=30
                if (n <= 30) {
                    resolve(n); // 执行完之后会将promise对象的状态设置为成功
                    // console.log("恭喜中奖！");
                } else {
                    reject(n);   // 执行完之后会将promise对象的状态设置为失败
                    // console.log("再接再厉！")
                }
            }, 1000);
        });

        // 调用 then方法
        p.then((n) => {
            console.log(`恭喜中奖！您的号码为${n}`);
        }, (n) => {
            console.log(`再接再厉！您的号码为${n}`);
        });

        console.log(p);
        return false;
    });
</script>
</body>

</html>